// 父组件
<template>
  <div class="hello">

    <button v-on:click="click" value="点我">点我</button>
    <button v-on:click="clear" value="清空图片">点我</button>
    <h2>{{textTitle}}</h2>



    <bind-sub v-on:titleChanged="updateTitle" v-bind:users="users"></bind-sub>
    <bind-sub-a></bind-sub-a>
    <bind-sub-b></bind-sub-b>
    <bind-sub-c></bind-sub-c>
    开始引用嵌套
    <bind-child :foo="foo"
                :boo="boo"
                :coo="coo"
                :doo="doo"
                title="前端工匠">

    </bind-child>
    图片选择
    <image-upload ref="upload" :limitCount="limitCount" :urlList="imageUrls" ></image-upload>
  </div>
</template>

<script>
  import BindSub from "./BindSub";
  import BindSubA from "./BindSubA";
  import BindSubB from "./BindSubB";
  import BindSubC from "./BindSubC";
  import BindChild from "./BindChildA"
  import ImageUpload from '../Common/ImageUpload'
  export default {
    name: "Hello",
    data() {
      return {
        textTitle:"传递的是一个值",
        users:["Henry","Bucky","Emily"],
        foo: "Javascript",
        boo: "Html",
        coo: "CSS",
        doo: "Vue",
        limitCount : 9,
        imageUrls:[]
      };
    },
    components: {
      BindSub,
      BindSubA,
      BindSubB,
      BindSubC,
      BindChild,
      ImageUpload
    },
    methods:{
      updateTitle(value){

        this.textTitle = value
      },
      click(){
        this.$store.commit('increment')
        console.log(this.$store.state.count)
        console.log("result is " + JSON.stringify(this.imageUrls))
      },
      clear(){
        this.$refs.upload.cancel()

      }
    }
  };
</script>
